
import React from 'react'
import type { KeyboardEvent } from 'react'
import './index.css'
import Weather from './Weather'

function App() {
  let imgindex = 1


  imgindex = Math.floor(Math.random() * 11) + 1 // 1~11 之间     之后要根据一天中的时间段来进行视频的切换？？？
  const videoSrc = `/videos/day${imgindex}.mp4`

  const [istyping, setistyping] = React.useState(false)
  return (
    <div className="w-full h-screen overflow-hidden relative">


      <video
        className={`absolute w-full h-full object-cover z-[-1] `}
        src={videoSrc}
        autoPlay
        loop
        muted
      />

      <div className={`flex flex-col justify-center items-center h-full text-white  bg-black/30 ${istyping ? 'backdrop-blur-sm' : ''}`}>
        <Weather />
        <h1 className="text-4xl font-bold mb-4">Welcome to The Custom Tab</h1>
        <input type="text" placeholder="Search..." className="px-4 py-2 rounded text-black" onFocus={() => setistyping(true)} onBlur={() => setistyping(false)} onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {

          if (e.key === 'Enter') {
            window.location.href = `https://www.bing.com/search?q=${e.currentTarget.value}`
          }
        }} />
      </div>
    </div>
  )
}

export default App
